import React from "react";
import './TodoFooter.css';

export default function TodoFooter({checkAllTodos, todos, removeDoneTodos}) {
  //声明函数
  let checkTodos = (e) => {
    checkAllTodos(e.target.checked)
  }
  return (
    <div className="todo-footer">
      <label>
        <input type="checkbox" checked={todos.every(item => item.done) && todos.length > 0} onChange={checkTodos} />
      </label>
      <span>
        <span>已完成 {todos.filter(item => item.done).length}</span> / 全部 {todos.length}
      </span>
      <button onClick={() => {
        removeDoneTodos();
      }} className="btn btn-danger">清除已完成任务</button>
    </div>
  );
}
